<template>
  <el-icon class="collapse-icon" @click="collapse">
    <component :is="themeConfig.isCollapse ? 'expand' : 'fold'"></component>
  </el-icon>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from '@/store/index'

const { global } = useStore()
const themeConfig = computed(() => global.themeConfig)

const collapse = () => {
  global.setThemeConfig({
    ...themeConfig.value,
    isCollapse: !themeConfig.value.isCollapse,
  })
}
</script>

<style scoped lang="less">
.collapse-icon {
  // margin-right: 20px;
  width: 40px;
  font-size: 22px;
  cursor: pointer;
}
</style>
